<template>
  <view class="bottom-bar">
    <view class="input-bar" v-if="!isShowRecord">
      <image
        src="../../static/imgs/icons/mic_icon.png"
        mode="widthFix"
        class="mic-icon"
        @tap.stop="onToggleMode"
      ></image>
      <TnInput
        v-model="inputValue"
        placeholder="请输入你的问题或需求"
        size="sm"
        height="70rpx"
        confirm-type="确定"
        style="width: 400rpx; border-radius: 30rpx"
        @confirm="handleSubmit"
        maxlength="500"
      />
      <image
        src="../../static/imgs/icons/send_icon.png"
        mode="widthFix"
        class="send-icon"
        @tap.stop="handleSubmit"
      ></image>
    </view>
    <view class="mic-bar" v-if="isShowRecord">
      <image
        src="../../static/imgs/icons/keyboard_icon.png"
        mode="widthFix"
        class="keyboard-icon"
        @tap.stop="onToggleMode"
      ></image>
      <view
        class="record_box"
        @longpress="onStartRecord"
        @touchend="onEndRecord"
      >
        <image
          src="../../static/imgs/icons/mic_icon.png"
          mode="widthFix"
          class="mic-img"
        ></image>
        {{ recordText }}</view
      >
    </view>
  </view>

  <!-- 语音音阶动画 长按说话时的动画 -->
  <view class="prompt" v-if="animation">
    <section class="dots-container">
      <view class="dot"></view>
      <view class="dot"></view>
      <view class="dot"></view>
      <view class="dot"></view>
      <view class="dot"></view>
    </section>
    <text>说话中...</text>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import { onLoad } from '@dcloudio/uni-app'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { useUserStore } from '@/stores'
var plugin = requirePlugin('WechatSI')
let manager = plugin.getRecordRecognitionManager()

const inputValue = ref('')
const isShowRecord = ref(false)
const recordText = ref('按住说话')
const animation = ref(false)
const userStore = useUserStore()
const btnTextObj = {
  start: '按住说话',
  end: '松开结束',
}

onLoad(() => {
  initRecord()
  var pages = getCurrentPages()
  console.log(pages)
  console.log(556)
})

const onToggleMode = () => {
  isShowRecord.value = !isShowRecord.value
}

const onStartRecord = () => {
  recordText.value = btnTextObj.end
  animation.value = true
  manager.start({
    duration: 60000,
    lang: 'zh_CN',
  })
}

const onEndRecord = () => {
  recordText.value = btnTextObj.start
  animation.value = false
  manager.stop()
}

const initRecord = () => {
  manager.onRecognize = function (res) {
    console.log('current result', res.result)
  }
  manager.onStop = function (res) {
    console.log('录音的音频url：', res.tempFilePath)
    console.log('录音的中文：', res.result)
    tnNavPage(
      `/home-page/agent/zh-answer?problem=${res.result}&pageId=${userStore.currentAgentId}`
    )
  }
  manager.onStart = function (res) {
    console.log('成功开始录音识别', res)
  }
  manager.onError = function (res) {
    console.error('error msg', res.msg)
  }
}

const handleSubmit = () => {
  tnNavPage(
    `/home-page/agent/zh-answer?problem=${inputValue.value}&pageId=${userStore.currentAgentId}`
  )
  inputValue.value = ''
}
</script>

<style lang="scss" scoped>
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 26rpx;
  padding-bottom: 60rpx;
  background: #fff;
}
.input-bar {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  .mic-icon {
    width: 46rpx;
    margin-right: 30rpx;
  }
}
.mic-bar {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  .keyboard-icon {
    width: 46rpx;
    margin-right: 30rpx;
  }
  .record_box {
    width: 400rpx;
    height: 70rpx;
    border-radius: 30rpx;
    border: 2rpx solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    .mic-img {
      width: 46rpx;
      margin-right: 30rpx;
    }
  }
}
/* 动画 */
.prompt {
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 100px;
}

.prompt text {
  position: absolute;
  bottom: 2px;
  color: #f3a73f;
  left: calc(45%);
  animation: puls 1.5s infinite ease-in-out;
}

.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 45%;
  position: absolute;
  bottom: 0px;
  left: calc(27.5%);
  background-color: #fdedd9;
  border-radius: 20px;
}

.dot {
  height: 16px;
  width: 16px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #f3a73f;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #f3a73f;
    box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #f9d39f;
    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #f3a73f;
    box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
  }
}

@keyframes puls {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}
.send-icon {
  width: 46rpx;
  margin-left: 26rpx;
}
</style>
